<template>
  <el-dialog v-model="addDialogFormVisible" title="新增用户" width="500">
    <el-form :model="addForm">
      <el-form-item label="用户账号" :label-width="formLabelWidth">
        <el-input v-model="form.account" autocomplete="off" />
      </el-form-item>
      <el-form-item label="用户名称" :label-width="formLabelWidth">
        <el-input v-model="form.name" autocomplete="off" />
      </el-form-item>

      <el-form-item label="出生日期" :label-width="formLabelWidth">
        <div class="demo-date-picker">
          <div class="block">
            <el-date-picker
              v-model="form.birthday"
              type="date"
              placeholder="2000-01-01"
              :size="size"
            />
          </div>
        </div>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="closeDialog">关闭</el-button>
        <el-button @click="addClick">提交</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref, onMounted, watch } from "vue";
import { ElMessage } from "element-plus";
import http from "../../../../util/http.js";
import { defineProps, defineEmits } from "vue";

const props = defineProps({
  addFormVisible: Boolean,
});

const emit = defineEmits(["update:addFormVisible", "refreshTable"]);

const addDialogFormVisible = ref(props.addFormVisible);
const formLabelWidth = "140px";

const form = ref({
  account: "",
  name: "",
  birthday: "",
});

watch(
  () => props.addFormVisible,
  (newVal) => {
    addDialogFormVisible.value = newVal;
  }
);

const closeDialog = () => {
  addDialogFormVisible.value = false;
  emit("update:addFormVisible", false);
};

watch(addDialogFormVisible, (newVal) => {
  if (!newVal) {
    emit("update:addFormVisible", false);
  }
});

const addClick = () => {
  http.post("/user/adduser", form.value).then((res) => {
    if (
      form.value.account != "" &&
      form.value.name != "" &&
      form.value.birthday != ""
    ) {
      addDialogFormVisible.value = false;
      ElMessage.success("添加成功");
      closeDialog();
      emit("refreshTable");
    } else {
      console.log("前端有未填写的");
    }
  });
};

onMounted(() => {});
</script>
<style scoped>
</style>